<template>
  <div class="page-container">
    <div class="version" v-if="restore.id">
      <div>
        当前版本数据备份名称：<span class="blur">{{restore.name}}</span>，
        数据备份类型：<span class="blur">{{restore.type}}</span>，
        数据备份方式：<span class="blur">{{restore.mode}}</span>，
        数据恢复时间：<span class="blur">{{date.formatLongDate(restore.createTime)}}</span>。</div>
    </div>
    <el-upload
      class="upload"
      drag
      name="file"
      accept=".dat"
      :http-request="handleRestore"
    >
      <div style="padding: 100px 0">
        <ac-icon iconId="018ece4f70fcf0627f81" size="50" color="#626364" />
        <div class="tips">拖动或者点击上传恢复数据的文件</div>
      </div>
    </el-upload>
    <div
      v-if="message"
      :style="'font-size: 18px;color:' + (success ? 'black' : 'red')"
    >{{message}}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/http/api';
import date from "@/utils/date";
import { ElMessage, ElMessageBox } from "element-plus";
import loading from '@/utils/loading';

const restore = ref({});
const success = ref(true);
const message = ref('');

const loadRestore = () => {
  api.post("/system/restore/queryLast").then(res => {
    restore.value = res.data || {};
  })
};

const handleRestore = (file) => {
  ElMessageBox.confirm("请确认是否恢复数据？", '提示', {type: 'warning'}).then(() => {
    loading.showLoading("数据恢复中，请稍候...");
    api.uploadFile('/system/restore/restore', {'file': file.file}).then((res) => {
      loading.hideLoading();
      if (res.code === '1') {
        success.value = true;
        message.value = res.message;
        ElMessage.success(res.message);
        loadRestore();
      } else {
        success.value = false;
        message.value = res.message;
        ElMessage.error(res.message);
      }
    }).catch((e) => {
      loading.hideLoading();
      success.value = false;
      message.value = e.message;
      ElMessage.error(e.message);
    });
  });
}

onMounted(() => {
  loadRestore();
});
</script>

<style scoped>
.version {
  margin: 10px 0;
  .blur {
    color: #117fe8;
  }
}
.tips {
  margin-top: 30px;
  font-weight: 600;
  font-size: 20px;
  color: #626364;
}
.upload :deep(.el-upload-dragger) {
  border-color: #909399;
}
.upload :deep(.el-upload-dragger:hover) {
  border-color: #117fe8;
}
</style>